<template>
  <div class="common-pd-page prict-table-box">
    <div class="quotation-apply">
      <HPModuleTitle titleText="结算方式"> </HPModuleTitle>
      <div class="content">
        <p>结算方式</p>
        <div>
          <span class="label">结算方式：</span
          ><span>{{ clearingForm.settName }}</span>
          <span class="label" style="padding-left: 40px">结算公式：</span
          ><span>{{ clearingForm.settDetail }}</span>
        </div>
        <el-form
          :inline="true"
          :model="clearingForm"
          class="demo-form-inline"
          label-width="90px"
        >
          <el-form-item label="岗位名称" required="">
            <el-input
              v-model="clearingForm.postName"
              size="small"
              disabled
              placeholder="岗位名称"
              style="width: 220px"
            ></el-input>
          </el-form-item>
          <el-form-item label="岗位职级" required="">
            <el-input
              v-model="clearingForm.rankLevelName"
              size="small"
              disabled
              placeholder="岗位职级"
              style="width: 220px"
            ></el-input>
          </el-form-item>
          <el-form-item label="岗位报价" required="">
            <el-input
              v-model="clearingForm.positionPrice"
              size="small"
              disabled
              placeholder="岗位报价"
              style="width: 220px"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import HPModuleTitle from "./../HPModuleTitle";
export default {
  components: {
    HPModuleTitle,
  },
  props: {
    scales: {
      type: [Object, Array],
      default: () => {
        return {};
      },
    },
    clearingForm: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {};
  },
};
</script>
<style lang="scss" scoped>
@import "~@/assets/scss/mixins.scss";
.prict-table-box {
  .quotation-apply {
    text-align: left;
    .content {
      padding: 20px;
      border: 1px solid #eee;
      border-radius: 5px;
      & > p {
        font-family: "PingFang SC";
        font-style: normal;
        font-weight: 700;
        font-size: 14px;
        line-height: 22px;
        color: #212121;
        padding-left: 10px;
        position: relative;
        padding-bottom: 20px;
        &::after {
          content: " ";
          display: inline-block;
          width: 4px;
          height: 16px;
          background: $-bakcground-secondary;
          position: absolute;
          top: 3px;
          left: 0;
        }
      }
      > div {
        padding-bottom: 20px;
        span {
          font-weight: 400;
          font-size: 14px;
          line-height: 22px;
          color: #212121;
        }
        .label {
          color: #535353;
          padding: 0 4px 0 10px;
        }
      }
    }
  }
  .el-form {
    display: flex;
    flex-wrap: wrap;
    .el-form-item {
      flex: 1 0 40%;
      margin-bottom: 12px;
    }
    .el-input.is-disabled .el-input__inner {
      color: #212121;
    }
  }
}
</style>
